<template>
  <div class="record_table_module">
    <header>
      <span class="label">
        {{ title }}
        <i class="iconfont icon-reset" @click="initTableData"></i>
      </span>
      <div class="selected">
        <span>选中ID：</span>
        <span>{{ selectedRecordId ? selectedRecordId : '未选中' }}</span>
      </div>
      <div class="buttons">
        <el-popover v-model="isSave" width="200" trigger="click">
          <div class="before-report">
            <div class="report-form">
              <header>工序状态</header>
              <el-select v-model="procedure_status" size="mini">
                <el-option
                  v-for="status in ProcedureStatus"
                  :key="status"
                  :label="status"
                  :value="status"
                />
              </el-select>
            </div>
            <div class="report-form">
              <el-button type="primary" size="mini" @click="storeRecord">确认保存</el-button>
            </div>
          </div>
          <el-button slot="reference" :disabled="!limits.Store" type="success" size="mini">
            保存
          </el-button>
        </el-popover>
        <el-button size="mini" type="primary" :disabled="!limits.Create" v-debounce="addNewRecord">
          新建
        </el-button>
        <el-button size="mini" type="danger" :disabled="!limits.Delete" @click="deleteRecord">
          删除
        </el-button>
      </div>
    </header>
    <section>
      <el-table
        :data="tableData"
        height="100%"
        fit
        stripe
        size="mini"
        :row-class-name="computeActiveClass"
        @row-click="onTableRowClick"
      >
        <el-table-column type="index" label="序号" />
        <el-table-column
          v-for="(value, key) in tableColumnDict"
          :key="key"
          :prop="value"
          :label="value"
          align="center"
          min-width="120"
        />
      </el-table>
    </section>
  </div>
</template>

<script lang="ts">
import { Dictionary } from '@/interface/Basic'
import Vue from 'vue'
import { Getter } from 'vuex-class'
import { Component, Prop, Emit } from 'vue-property-decorator'
import {
  ProcedureRecordType,
  GetProcedureRecordList,
  GetReportOptions,
  CreateProcedureRecord,
  DeleteProcedureRecord
} from '@/api/procedure'
import { Message } from 'element-ui'
import { AxiosResponse } from 'axios'
import { deepClone } from '@/utils/specificFunc'
@Component
class RecordTable extends Vue {
  @Getter('theme') theme!: 'dark' | 'light'
  @Prop() title!: string
  @Prop({ required: true }) meter!: string
  @Prop({ required: true }) procedure!: string
  @Prop() params!: Dictionary<string>
  @Prop() limits!: Dictionary<boolean>
  @Prop({ required: true, default: {} }) tableColumnDict!: Dictionary<string>
  // @Prop({ required: true }) tableData!: Dictionary<string>[]
  tableData: Dictionary<string>[] = []
  selectedRecordId: string = ''
  ProcedureList: string[] = []
  ProcedureStatus: string[] = []
  procedure_status: string = ''
  isSave: boolean = false
  mounted() {
    this.procedure_status = '未完成'
    this.initTableData()
    this.initStoreOptions()
    this.$broadOn('onRecordStoreSucceed', (params: { procedure: string }) => {
      console.log(params, this.params.title)
      if (this.params.title === params.procedure) {
        // this.selectedRecordId = ''
        this.initTableData()
      }
    })
  }
  computeColumnWidth(column_key: string | number) {
    if (column_key === 'operation') return 180
  }
  initTableData() {
    if (!this.meter) return
    const data: ProcedureRecordType = {
      Number: this.meter,
      CuttingNumber: this.params.Cutting,
      DatabaseLabel: this.procedure
    }
    GetProcedureRecordList(data).then(
      (res: AxiosResponse<{ ReturnData: Dictionary<string>[] }>) => {
        const { ReturnData } = res.data
        this.tableData = deepClone(ReturnData)
        if (this.selectedRecordId !== '') {
          const selectedRow = ReturnData.find(row => row.id === this.selectedRecordId)
          if (!selectedRow) {
            this.selectedRecordId = ''
            return
          }
          this.onTableRowClick({
            id: this.selectedRecordId,
            完成状态: selectedRow['完成状态']
          })
        }
      }
    )
  }
  initStoreOptions() {
    GetReportOptions({ Number: this.meter, DatabaseLabel: this.procedure }).then(
      (res: AxiosResponse<{ ReturnData: Dictionary<string[]> }>) => {
        const { StatusList, ProcessList } = res.data.ReturnData
        this.ProcedureList = ProcessList
        this.ProcedureStatus = StatusList
      }
    )
  }
  @Emit('onRecordSelect')
  onTableRowClick(row: Dictionary<string>) {
    const { id, 完成状态: status } = row
    this.selectedRecordId = id
    this.procedure_status = status
    return { id, status, DatabaseLabel: this.procedure }
  }
  computeActiveClass(scope: { row: { id: string } }) {
    const { id } = scope.row
    if (id === this.selectedRecordId) {
      return 'el-table-active__row'
    }
    return ''
  }
  // rowStyle({ row, rowIndex }: { row: any; rowIndex: number }) {}
  addNewRecord() {
    const params = {
      Number: this.meter,
      CuttingNumber: this.params.Cutting,
      DatabaseLabel: this.procedure
    }
    CreateProcedureRecord(params).then(
      (res: AxiosResponse<{ Message: string; ReturnData: string }>) => {
        const { ReturnData, Message } = res.data
        this.$message({
          type: 'success',
          message: Message
        })
        this.selectedRecordId = ReturnData
        this.initTableData()
      }
    )
  }
  @Emit('onRecordStore')
  storeRecord() {
    this.isSave = false
    const selectRecord = this.tableData.find(record => record.id === this.selectedRecordId)
    if (selectRecord) {
      const { id, 出厂编号: Number } = selectRecord
      return { id, Number, Status: this.procedure_status, DatabaseLabel: this.procedure }
    } else return {}
  }
  @Emit('onRecordDelete')
  deleteRecord() {
    if (!this.selectedRecordId) {
      Message({
        type: 'warning',
        message: '请先选择记录'
      })
      return
    }
    DeleteProcedureRecord({ id: this.selectedRecordId, DatabaseLabel: this.procedure }).then(
      (res: AxiosResponse<{ Message: string }>) => {
        Message({
          type: 'success',
          message: res.data.Message
        })
        this.selectedRecordId = ''
        this.initTableData()
      }
    )
  }
}
export default RecordTable
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
@import '~@/styles/layout.less';
.record_table_module {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  header {
    height: 30px;
    width: 100%;
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: 800;
    text-align: left;
    #flex(row, center, space-between);
    #color(color, --primary-text-color);
    .label > i {
      box-sizing: border-box;
      padding: 2px;
      border-radius: 2px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .label > i:hover {
      color: #ffffff;
      #color(background-color, --primary-blue-color);
    }
    .selected {
      font-size: 14px;
      font-weight: 400;
      span:last-child {
        box-sizing: border-box;
        padding: 2px 5px;
        border-radius: 3px;
        font-size: 14px;
        color: #ffffff;
        #color(background-color, --primary-blue-color);
      }
    }
    .buttons {
      #flex(row, center, space-around);
      .el-button {
        margin: 0;
        margin-left: 10px;
      }
      .el-button:first-child {
        margin-right: 0;
      }
    }
  }
  section {
    flex: 1;
    width: 100%;
    overflow: auto;
    /deep/.el-table {
      .el-table__header-wrapper {
        .el-table__header {
          .el-table__cell {
            #color(background-color, --primary-bg-color);
          }
        }
      }
    }
  }
}
.before-report {
  #flex(column, center, flex-start);
  .report-form {
    box-sizing: border-box;
    padding-bottom: 8px;
    margin-bottom: 8px;
    width: 100%;
    border-bottom: solid 1px;
    #color(border-bottom-color, --primary-border-color);
    header {
      margin-bottom: 5px;
      width: 100%;
      font-size: 12px;
      text-align: left;
      #color(color, --primary-text-color);
    }
    /deep/.el-button {
      width: 100%;
    }
  }
  .report-form:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: solid 0;
  }
}
</style>
